<!--成员配置 -->
<template>
  <div class="member-config ">
    <div class="clearfix" >
      <div class="tree-wrap fl" :style="{height:clientHeight,background:'#eee'}">
        <p class="all-button"
          @click="allDep" :class="{actived:deptId == 0}">全部部门</p>
        <el-tree :data="departmentList"
          :props="defaultProps"
          node-key="id"
          @node-click="handleNodeClick">
        </el-tree>
      </div>
      <div class="checkbox-list fr" ref="rightContent">
        <el-form>
          <el-form-item label="组内用户">
            <div class="list-wrap">
              <div class="all">
                <el-checkbox v-model="interiorAll"
                  @change="interiorAllHandle">
                  <span class="all-title">全选</span>
                </el-checkbox>
              </div>
              <div class="list">
                <el-checkbox v-for="item in interior"
                  :key="item.userId"
                  :label="item.name"
                  v-model="item.check"
                  class="list-item"></el-checkbox>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="组外用户"
            style="border-top:1px solid #ddd">
            <div class="list-wrap">
              <div class="all">
                <el-checkbox v-model="externalAll"
                  @change="externaAllHandle">
                  <span class="all-title">全选</span>
                </el-checkbox>
              </div>
              <div class="list">
                <el-checkbox v-for="item in external"
                  :key="item.userId"
                  :label="item.name"
                  v-model="item.check"
                  class="list-item"></el-checkbox>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="handler-btns">
      <el-button size="small"
        type="primary"
        @click="_sure"
        v-has="'membersave'"
        >
        确定
      </el-button>
      <el-button size="small" @click="_cancel">
        取消
      </el-button>
    </div>
  </div>
</template>

<script>
import {
  getDeptstaff,
  getRoleMember,
  membersave
} from "@/public/js/setting.js";
export default {
  components: {},
  props: ["roleId",'refresh'],
  data() {
    return {
      departmentList: [], //部门列表
      defaultProps: {
        children: "adminDepartments",
        label: "department"
      },
      external: [], //组外
      interior: [], //组内
      deptId: 0,
      interiorAll: true,
      externalAll: false,
      externalResult: [],
      clientHeight: '1px'
    };
  },
  updated(){
    this.clientHeight = this.$refs['rightContent'].clientHeight < 232 ? '500px' : this.$refs['rightContent'].clientHeight+'px'
  },
  computed: {},
  methods: {
    _getDeptstaff() {
      getDeptstaff().then(res => {
        this.departmentList = res.data.adminDepartments;
      });
    },
    _getRoleMember() {
      getRoleMember({
        roleId: this.roleId,
        deptId: this.deptId
      }).then(res => {
        this.interior = res.data.interior;
        this.external = res.data.external;
      });
    },
    /****组内按钮交互 */
    interiorAllHandle(val) {
      if (val) {
        this.interior.forEach(item => {
          item.check = true;
        });
      } else {
        this.interior.forEach(item => {
          item.check = false;
        });
      }
    },
    /****组外按钮交互 */
    externaAllHandle(val) {
      if (val) {
        this.external.forEach(item => {
          item.check = true;
        });
      } else {
        this.external.forEach(item => {
          item.check = false;
        });
      }
    },
    //节点点击
    handleNodeClick(node) {
     
      this.externalResult= [];
      this.deptId = node.id;
      this._getRoleMember();
    },
    allDep() {
      this.deptId = 0;
      this._getRoleMember();
    },
    //确认
    _sure() {
      console.log(this.interior);
      let data = [];
      // if (this.externalResult.length) {
       
      // } else {

      // }
     data = this.interior.concat(this.externalResult);
      membersave({
        reoleId: this.roleId,
        interior: data
      }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            type: "success",
            message: "操作成功"
          });
          setTimeout(() => {
            this.$parent.hide();
           //this.$emit('refresh')
           this.refresh();
          }, 10);
        }
      });
    },
    // 取消
    _cancel(){
      this.$parent.hide();
    }
  },
  watch: {
    interior: {
      handler(value) {
        let flag = true;
        value.forEach(item => {
          if (!item.check) {
            flag = false;
          }
        });
        this.interiorAll = flag;
      },
      deep: true
    },
    external: {
      handler(value) {
        this.externalResult = [];
        let flag = true;
        value.forEach(item => {
          if (!item.check) {
            flag = false;
          } else {
            this.externalResult.push(item);
          }
        });
        this.externalAll = flag;
      },
      deep: true
    }
  },
  created() {
    this._getDeptstaff();
    this._getRoleMember();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.member-config {
  .tree-wrap {
    .all-button {
      padding-left: 22px;
      background: #eee;
      cursor: pointer;
      &.actived{
        background: #f5f7fa
      }
    }
    width: 20%;
    height: 800px;
    .el-tree {
      background: #eee;
    }
  }
  .checkbox-list {
    width: 78%;
    .el-form .el-form-item .el-form-item__label {
      font-weight: bold;
    }
    .list-wrap {
      .list-item {
        width: 20%;
        margin-left: 0;
      }
    }
  }
  .handler-btns {
    padding-top: 30px;
    text-align: center;

  }
}
</style>